<template>
  <div>
    <div :style="certTitle">
      <div><img src="@/static/images/d_logo.png" /></div>
      <div :style="rightText">物流源数字化回单</div>
    </div>
    <div :style="boxMiddle">
      <span>合同编号：{{certEreData.contractCode || '--' }}</span>
      <span>订单编号：{{certEreData.orderCode || '--' }}</span>
      <span>签收时间：{{ certEreData.signTime || '--' }}</span>
    </div>
    <!-- 表格采用td th td -->
    <table v-if="!!certEreData"
           :style="table"
           border="1px"
           cellspacing="0px"
           cellpadding="4px">
      <tr>
        <td rowspan="5">发货方</td>
        <td>发货公司</td>
        <td colspan="4">{{certEreData.fromCompanyName}}</td>
        <td rowspan="5">收货方</td>
        <td>收货公司</td>
        <td colspan="6">{{certEreData.toCompanyName}}</td>
      </tr>
      <tr>
        <td>发货人</td>
        <td colspan="4">{{certEreData.fromManName}}</td>
        <td>收货人</td>
        <td colspan="6">{{certEreData.toManName}}</td>
      </tr>
      <tr>
        <td>发货电话</td>
        <td colspan="4">{{certEreData.fromContact}}</td>
        <td>收货电话</td>
        <td colspan="6">{{certEreData.toContact}}</td>
      </tr>
      <tr>
        <td>发货时间</td>
        <td colspan="4">{{certEreData.fromTime}}</td>
        <td>收货时间</td>
        <td colspan="6">{{certEreData.toTime}}</td>
      </tr>
      <tr>
        <td>发货地址</td>
        <td colspan="4">{{certEreData.from}}</td>
        <td>收货地址</td>
        <td colspan="6">{{certEreData.to}}</td>
      </tr>
      <tr>
        <td :rowspan="certEreData.goods.length + 1">发货方明细</td>
        <td>货物名称</td>
        <td>规格</td>
        <td>发货数</td>
        <td>重量(公斤)</td>
        <td>体积(立方米)</td>
        <td :rowspan="certEreData.goods.length + 1">收货方明细</td>
        <td>货物名称</td>
        <td>规格</td>
        <td>发货数</td>
        <td>实签数</td>
        <td>签收异常</td>
        <td>重量(公斤)</td>
        <td>体积(立方米)</td>
      </tr>
      <tr v-for="(item, index) in certEreData.goods"
          :key="index">
        <td>{{item.goodsName}}</td>
        <td>{{item.goodsSpec}}</td>
        <td>{{item.goodFromTotalAmount}}</td>
        <td>{{item.goodTotalWeight}}</td>
        <td>{{item.goodTotalVolume}}</td>
        <!-- 分割 -->
        <td>{{item.goodsName || '--'}}</td>
        <td>{{item.goodsSpec || '--'}}</td>
        <td>{{item.goodFromTotalAmount || '--'}}</td>
        <td>{{item.goodToTotalAmount || '--'}}</td>
        <td>{{abnormalReplace(item.goodSignException) || '--'}}</td>
        <td>{{item.goodReceiptTotalWeight || '--'}}</td>
        <td>{{item.goodReceiptTotalVolume || '--'}}</td>
      </tr>
      <!-- 总计 -->
      <tr>
        <td>发货总计</td>
        <td></td>
        <td></td>
        <td>{{certEreData.fromTotalAmount}}</td>
        <td>{{certEreData.fromTotalWeight}}</td>
        <td>{{certEreData.fromTotalVolume}}</td>
        <!-- 分割 -->
        <td>收货总计</td>
        <td></td>
        <td></td>
        <td>{{certEreData.fromTotalAmount	}}</td>
        <td>{{certEreData.toTotalAmount	}}</td>
        <td>{{certEreData.totalSignException}}</td>
        <td>{{certEreData.toTotalWeight}}</td>
        <td>{{certEreData.toTotalVolume}}</td>
      </tr>
      <tr>
        <td colspan="14"
            :style="tips">重要提示：仅供预览。</td>
      </tr>
    </table>
    <div v-if="!!certEreData"
         :style="boxFooter">
      时间戳： {{certEreData.signTime || '--'}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CertTable',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    abnormalReplace () {
      return goods => goods.replace(/<br \/>/g, "")
    },
    certEreData () {
      return this.value
    },
    certTitle () {
      return {
        display: "flex",
        justifyContent: "space-around",
        alignItems: "center",
        borderBottom: "1px solid #303133"
      }
    },
    rightText () {
      return {
        fontSize: "24px",
        color: "#000"
      }
    },
    boxMiddle () {
      return {
        display: "flex",
        justifyContent: "space-around",
        padding: "12px",
        color: "#000"
      }
    },
    tips () {
      return {
        color: 'red'
      }
    },
    boxFooter () {
      return {
        padding: "20px 80px 10px 60px",
        textAlign: "right"
      }
    },
    table () {
      return {
        fontSize: '12px',
        fontWeight: '500',
        fontFamily: 'DFKai-scrollBy',
        borderCollapse: "collapse",
        margin: "0 auto"
      }
    }
  }
}
</script>

<style scoped>
</style>